<template>
  <el-transfer
    v-model="value"
    filterable
    :filter-method="filterMethod"
    filter-placeholder="State Abbreviations"
    :data="data"
  />
</template>

<script lang="ts" setup>
import { ref } from 'vue';

interface Option {
  key: number;
  label: string;
  initial: string;
}

const generateData = () => {
  const data: Option[] = [];
  const states = [
    '乱花',
    '渐欲',
    '迷人眼',
    '九天',
    'coc9',
    '666',
    '洛玦璃',
    '墨染',
    '陌百',
    '天份',
    '孕妇之家',
    '绝处逢生',
    '虫儿飞',
    '自由之都',
    'V字仇杀队',
    '温柔的被爱着',
    'SAWIRDIN',
    '涛涛涛呀',
    '人美',
    '轩辕问天',
    '帝尊',
    '爱在西元前',
    'TIGY',
    '随风',
    '柒拾叁',
    '星野一',
    '晚风微雨问海棠',
    '身上就睡觉',
    '杀戮地带',
    '一叶知秋',
    '旧城以西',
    '白鸽约定晚霞',
    '辰辰',
    '中大吴彦祖',
    '哈字太多',
    '神一',
    '齊',
    '飞黄腾达',
    '洛凡尘',
    '服了',
    '话梅糖',
    '零林凌',
    '随心',
    '小婷',
    'GD沐英',
    '清远盛兴',
    '魅影迷离',
  ];

  const initials = ['CA', 'IL', 'MD', 'TX', 'FL', 'CO', 'CT'];
  states.forEach((city, index) => {
    data.push({
      label: city,
      key: index,
      initial: city,
    });
  });
  return data;
};

const data = ref<Option[]>(generateData());
const value = ref([]);

const filterMethod = (query, item) => {
  return item.initial.toLowerCase().includes(query.toLowerCase());
};
</script>
